<script lang="ts" setup>
const props = defineProps({
  accordion: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array,
    required: true,
  },
});

const data = ref<Record<string, any>[]>(
  props.list.map((i: Record<string, any>) => ({
    ...i,
    show: false,
  }))
);

  defineExpose({
  data
})


const handleTitle = (item, index) => {
  //手风琴效果
  if (props.accordion) {
    data.value.forEach((i, idx) => {
      i.show = idx === index ? !item.show : false;
    });
    return;
  }
  //折叠面板
  data.value[index].show = !item.show;
};
</script>

<template>
  <div class="box-container">
    <div v-for="(item, index) in data" :key="index" class="accordion">
      <div @click="handleTitle(item, index)">
        <slot name="title" :item="item"> </slot>
      </div>
      <div class="accordion-body" :class="{ 'is-open': item.show }">
        <div class="content">
          <slot name="content" :item="item"> </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.is-open {
  grid-template-rows: 1fr;
}

.accordion-body > .content {
  overflow: hidden;
}
</style>
